<template>
    <div class="beijingorder">
  <el-table :data="order" style="width: 100%;  "
   :row-class-name="tableRowClassName"
   >
    <el-table-column style="background-color: black;" label="订单号" prop="orderFormId"  />
    <!-- <el-table-column label="用户号" prop="userId" /> -->
    <!-- <el-table-column label="订单数量" prop="totalNum" />
    <el-table-column label="订单总价格" prop="totalMoney" /> -->
    <el-table-column label="购买时间" prop="orderDate" />
    <el-table-column label="订单状态" prop="state" />
    <el-table-column label="书籍号" prop="bookId" />
    <el-table-column>
      <template #header>
        <el-input v-model="search" size="small" placeholder="填写订单号并回车" @keydown.enter="findorder"  />
      
      </template>
      <template #default="scope">
        <el-button size="small" class="dingdanxiangqing" @click="orderdetailopen(scope.$index, scope.row)"
       style="background-color:black;color:white"   >订单详情</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="returnOfBook(scope.$index, scope.row)"
          >退货</el-button
        >
      </template>
    </el-table-column>
  </el-table>
 <Orderdetail ref="orderdetail"></Orderdetail>
  </div>
</template>
  <script>
import Orderdetail from '../qiantai/Orderdetail.vue'
  //return是退货的意思
export default {
  name: "Order",
  components:{Orderdetail},
 
  data() {
    return {
        order: [],
        search:"",
    
    };
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            console.log(rowIndex, row);
        if (row.state == '未完成') {
          return '';
        } else if (row.state == '完成') {
          return 'success-row';
        }
        return '';
      },
    
        loadorders() {
           
            var data = new FormData()
            data.append('userid', sessionStorage.getItem('userId'))
            this.$axios.post('/getuserorders',data).then(resp => {
                if (resp.status == 200) {
                    this.order = resp.data
                console.log(this.order[0]);
            }
        })
      },
      orderdetailopen(index, row) {
        
        console.log(row);
        this.$refs.orderdetail.order=row
        this.$refs.orderdetail.dialogVisible = true
        var data = new FormData();
            data.append('bookId', row.bookId)
            this.$axios.post("/getbookname", data).then(resp => {
                console.log(resp.data);
                // this.bookname=resp.data
                this.$refs.orderdetail.bookname=resp.data
            })
      },
      getbookname() {
          
    },
        findorder() {
            console.log(this.search);
            if (this.search == ""){
                this.loadorders()
            }else{
                 var data = new FormData()
            data.append('search', this.search)
            this.$axios.post('/findorders', data).then(resp => { 
                if (resp.status == 200) {
                   
                    this.order =resp.data;
                    console.log(resp.data);
                }
            })
            }
           
      },
      fallback() {
        console.log("执行fallback方法");
      
        
           
          this.$emit('buy')
          // this.$cookies.set('fallback',"") 
     
      },
      fallbackstart() {
        console.log(this.$cookies.get('fallback'));
        if (this.$cookies.get('fallback') == 'succees') {
         
           this.fallback()
      
      }
    },
        returnOfBook(index, row) {
            console.log(row.orderFormId);
            var data=new FormData()
            data.append('orderFormId',row.orderFormId)
            this.$axios.post('/returnofbook',data).then(resp=>{
              if(resp.status==200){
                this.returnsucess()
          this.loadorders()
              }
            })

            
        },
        returnsucess() {
      
      this.$message({
        message: '退货成功',
        type: 'success'
      });
    
  }
    },
    mounted: function () {
      this.loadorders()
    this.fallbackstart()
  }
};
</script>
<style>
  /* .el-table .warning-row {
    background: rgba(255, 0, 0, 0.7);
  } */

  .el-table .success-row {
    background: #000;
    color: white;
  }


.el-table th.el-table__cell {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #0e0808;
    
}
.dingdanxiangqing {
    --el-button-size: 24px;
    height: var(--el-button-size);
    padding: 5px 11px;
    font-size: 12px;
    color: white;
    background-color: #000;
   
}
</style>